<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动布局练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .leftfix {
            float: left;
        }

        .rightfix {
            float: right;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .container {
            /*水平居中*/
            margin: 0 auto;

            width: 960px;
            height: 900px;
            /*让子元素继承*/
            text-align: center;

        }

        .container-top {

        }

        .container-top-logo {

            width: 200px;

        }

        .container-top-banner1 {
            margin: 0 10px;
            width: 540px;
        }

        .container-top-banner2 {
            width: 200px;
        }

        .container-top-logo, .container-top-banner1, .container-top-banner2 {
            background-color: gray;
            height: 80px;
            /*水平垂直居中*/
            line-height: 80px;

        }

        .menu {
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: gray;
            width: 960px;
            height: 30px;
            line-height: 30px;
        }


        .one, .two {
            border: 1px solid black;
            /*需要减去边框1px*/
            width: 368px;
            height: 198px;
            margin-right: 10px;

        }


        .three, .four, .five, .six {
            text-align: center;
            width: 178px;
            height: 198px;
            border: 1px solid black;
            line-height: 198px;
            margin-right: 10px;


        }


        .seven, .eight, .nine {
            width: 198px;
            height: 128px;
            line-height: 128px;
            text-align: center;
            border: 1px solid black;
            margin-bottom: 10px;
        }


        .content-left-top {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <!--    顶部-->
    <div class="container-top clearfix">
        <!--        logo-->
        <div class="container-top-logo leftfix">logo</div>
        <!--        banner1-->
        <div class="container-top-banner1 leftfix">banner1</div>
        <!--        banner2-->
        <div class="container-top-banner2 leftfix">banner2</div>
    </div>
    <!--    菜单-->
    <div class="menu">菜单</div>
    <!--    内容区-->
    <div class="content clearfix">
        <!--        左侧-->
        <div class="content-left leftfix">
            <!--        左侧顶部-->
            <div class="content-left-top clearfix">  <!--                栏目1-->
                <div class="one leftfix">栏目一</div>
                <!--                栏目2-->
                <div class="two leftfix">栏目二</div>
            </div>
            <!--        左侧底部-->
            <div class="content-left-bottom clearfix ">
                <!--                栏目3-->
                <div class="three leftfix">栏目三</div>
                <!--                栏目4-->
                <div class="four leftfix">栏目四</div>
                <!--                栏目5-->
                <div class="five leftfix">栏目五</div>
                <!--                栏目6-->
                <div class="six leftfix">栏目六</div>
            </div>
        </div>
        <!--        右侧-->
        <div class="content-right leftfix">
            <div class="seven ">栏目七</div>
            <!--                栏目8-->
            <div class="eight ">栏目八</div>
            <!--                栏目9-->
            <div class="nine ">栏目九</div>
        </div>
    </div>

</div>
</body>
</html>


